<template>
    <div class="user_index">
        <div class="user_top">
            <!-- <div class="bg_img">背景图</div> -->
            <div class="user_info">
                <div class="avatar">
                    <img :src="userInfo.avatar" alt="" />
                </div>
                <div class="user_name">
                    <span>{{ userInfo.name }}{{userInfo.boolTrainer ? '(讲师)' : ''}}</span>
                    <!-- <i class="el-icon-edit" @click="openEditUser"></i> -->
                </div>
            </div>
        </div>
        <!-- 个人相关数据区域 -->
        <div class="user_message_post">
            <div class="top_nav">
                <ul>
                    <li :class="navType == 1 ? 'active' : ''" @click="changeNav(1)">
                        评论
                    </li>
                    <li :class="navType == 2 ? 'active' : ''" @click="changeNav(2)">
                        回复
                    </li>
                </ul>
            </div>
            <div class="type_1">
                <ul v-if="navType == 1">
                    <li :class="messageType == 4 ? 'active' : ''" @click="messageType != 4?changeType(4):''">
                        我评论的
                    </li>
                    <li v-if="userInfo.boolTrainer" :class="messageType == 1 ? 'active' : ''" @click="messageType != 1?changeType(1):''">
                        评论我的
                    </li>
                </ul>
                <ul v-if="navType == 2">
                    <li :class="messageType == 5 ? 'active' : ''" @click="messageType != 5?changeType(5):''">
                        我回复的
                    </li>
                    <li :class="messageType == 6 ? 'active' : ''" @click="messageType!=6?changeType(6):''">
                        回复我的
                    </li>
                </ul>
            </div>
            <div class="type_main">
                <div class="comment_area" v-if="navType == 1 || navType == 2">
                    <div
                            class="comment_item"
                            v-for="item in messageArr"
                            :key="item.id"
                    >
                        <div class="avatar">
                            <img :src="item.avatar" alt="" />
                        </div>
                        <div class="main">
                            <div class="top">
                                <div :class="item.user_status == 'DELETED' ?'delete_color' : 'username'" >
                                    {{ item.name
                                    }}<span class="reply_time">
                    {{ formatDateMDHM(item.createTime) }}
                  </span>
                                </div>
                            </div>
                            <div class="content">{{ item.content }}</div>
                            <div class="post_title">
                                课件：<span @click="goDetail(item.course_id,item.course_ware_id)"
                            >《{{ item.course_ware_name }}》——{{item.title}}</span
                            >
                            </div>
                            <div class="controller">
                                <el-button size="mini" type="danger" @click="delComment(item.id)"
                                >删除</el-button
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { formatDateMDHM } from "@/util/tools";
    export default {
        data() {
            return {
                userInfo:JSON.parse(localStorage.getItem("userInfo")),
                navType: 1,
                //底部获取个人相关信息
                messageType: 4, //1默认 评论我的   4我评论的   5我回复的  6回复我的
                page: 1, //消息分页
                keyword: "",
                postStatus: 1,
                messageArr: [],
                postDataArr: [],
                postPage: 1, //帖子分页
                followType: "follow",
                followOrFansArr: [],
                followPage: 1, //个人关注分页
                postIsArticle: 0,
                //修改资料
                showUserEdit: false,
                messageTotal: 0,
                followTotal: 0,
                postTotal: 0,
            };
        },
        created() {
            this.getCommentOrReply();
        },
        methods: {
            //删除评论
            delComment(item) {
                this.$confirm(`警告：是否删除？`)
                    .then(() => {
                        this.$https
                            .post("/mobiles/deleteTraReply", { id: item })
                            .then((res) => {
                                this.$message(res.data.message);
                                if (res.data.code == 200) {
                                    this.getCommentOrReply();
                                }
                            });
                    })
                    .catch(() => {});
            },
            //点击去用户主页
            goUserHome(id) {
                this.$router.push(`/train/study/userPage/${id}`);
            },
            // 切换分页--消息相关
            handleCurrentChangeMessage(val) {
                this.page = val;
                this.getCommentOrReply();
            },
            //格式化时间
            formatDateMDHM(date) {
                return formatDateMDHM(date);
            },
            //改变子导航
            changeType(type) {
                //根据主导航来判断子导航要取的数据
                switch (this.navType) {
                    case 1:
                        this.messageType = type;
                        this.getCommentOrReply();
                        break;
                    case 2:
                        this.messageType = type;
                        this.getCommentOrReply();
                        break;
                    default:
                        break;
                }
            },
            //改变导航
            changeNav(type) {
                if (this.navType == type) return;
                this.navType = type;
                this.postDataArr = [];
                this.messageArr = [];
                this.followOrFansArr = [];
                switch (this.navType) {
                    case 1:
                        this.messageType = 1;
                        this.getCommentOrReply();
                        break;
                    case 2:
                        this.messageType = 5;
                        this.getCommentOrReply();
                        break;
                    default:
                        break;
                }
            },
            //点击去课件详情
            goDetail(course_id,course_ware_id) {
                this.$router.push(`/train/study/detail/${course_id}/${course_ware_id}/-1`);
            },
            //获取评论相关信息
            getCommentOrReply() {
                this.$https
                    .post("/mobiles/getTraMessageByType", {
                        nowUser: JSON.parse(localStorage.getItem('userInfo')).userId,
                        messageType: this.messageType,
                        course_title: this.keyword,
                        course_ware_name:this.keyword,
                    })
                    .then((res) => {
                        //构建记录
                        this.messageTotal = res.data.data.length;
                        if (res.data.data.length != 0) {
                            this.messageArr = res.data.data;
                        } else {
                            this.messageArr = [];
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .user_top {
        width: 100%;
        background-color: white;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
        .bg_img {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid #ccc;
        }
        .user_info {
            width: 100%;
            padding: 30px 0 20px;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            .avatar {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .user_name {
                margin-top: 5px;
                font-size: 20px;
                font-weight: 600;
                .el-icon-edit {
                    cursor: pointer;
                    margin-left: 5px;
                }
            }

            .signature {
                font-size: 14px;
                margin-top: 10px;
            }
            .user_edit {
                width: 100%;
                margin-top: 20px;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end;
                padding-right: 30px;
                font-size: 14px;
                span {
                    padding: 5px 10px;
                    cursor: pointer;
                    border: 1px solid rgba(0, 0, 0, 0.1);
                }
            }
        }
    }
    .user_message_post {
        width: 100%;
        margin-top: 20px;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-flow: column nowrap;
        background-color: white;
        .top_nav,
        .type_1 {
            width: 100%;
            ul {
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                li {
                    margin-right: 15px;
                    position: relative;
                    cursor: pointer;
                    padding: 10px 0;
                    &.active {
                        font-weight: 600;
                        &::after {
                            content: "";
                            width: 30px;
                            height: 2px;
                            position: absolute;
                            bottom: -1px;
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }
                }
            }
        }
        .type_1 {
            ul {
                li {
                    padding: 5px 0;
                    &.active {
                        font-weight: normal;
                        margin-right: 20px;
                        &::after {
                            width: 0;
                            height: 0;
                        }
                    }
                }
            }
        }
        .type_main {
            .avatar {
                cursor: pointer;
            }
            width: 100%;
            .comment_area {
                width: 100%;
                display: flex;
                flex-flow: column nowrap;
                .comment_item {
                    width: 100%;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: flex-start;
                    padding: 10px 20px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                    .avatar {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        overflow: hidden;
                        border: 1px solid rgba(0, 0, 0, 0.05);
                        img {
                            width: 100%;
                        }
                    }
                    .username {
                        font-weight: 600;
                        span {
                            margin-left: 10px;
                            font-weight: 400;
                            // color: #999;
                        }
                    }
                    .delete_color{
                        color: #999999;
                    }
                    .main {
                        font-size: 12px;
                        margin-left: 10px;
                        .post_title {
                            margin-top: 8px;
                            span {
                                cursor: pointer;
                                color: #005fff;
                            }
                        }
                        .content {
                            font-size: 15px;
                            margin-top: 6px;
                            font-weight: 600;
                        }
                    }
                }
            }
            .post_area {
                width: 100%;
                display: flex;
                flex-flow: column nowrap;
                .post_item {
                    display: flex;
                    width: 100%;
                    flex-flow: column nowrap;
                    padding: 10px 20px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                    .user_info {
                        width: 100%;
                        display: flex;
                        flex-flow: row nowrap;
                        align-items: center;
                        .avatar {
                            width: 50px;
                            height: 50px;
                            overflow: hidden;
                            border-radius: 50%;
                            border: 1px solid rgba(0, 0, 0, 0.05);
                            img {
                                width: 100%;
                            }
                        }
                        .username {
                            display: flex;
                            flex-flow: column nowrap;
                            margin-left: 10px;
                            font-size: 14px;
                        }
                    }
                    .post_info {
                        width: 100%;
                        padding: 10px 0;
                        & > div {
                            cursor: pointer;
                        }
                    }
                }
            }
            .follow_area {
                width: 100%;
                display: flex;
                flex-flow: column nowrap;
                .follow_or_fans_item {
                    width: 100%;
                    display: flex;
                    flex-flow: row nowrap;
                    padding: 10px 20px;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                    .avatar {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        overflow: hidden;
                        border: 1px solid rgba(0, 0, 0, 0.05);
                        img {
                            width: 100%;
                        }
                    }
                    .user_info {
                        display: flex;
                        flex-flow: column nowrap;
                        justify-content: center;
                        margin-left: 10px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>
